<template>
	<view class="select-disease-popup-com">
		<u-popup mode="bottom" round="20rpx" :show="visable" :closeable="false" @close="onClose">
			<view class="select-disease-popup-container">
				<view class="select-disease-popup-header">
					<u-button @click="onClose" :customStyle="{margin: '0', width: '100rpx'}" shape="circle" size="small"
						text="取消"></u-button>
					<text class="title">请选择</text>
					<u-button @click="onConfirm" :customStyle="{margin: '0', width: '100rpx'}" shape="circle"
						size="small" type="primary" text="确认"></u-button>
				</view>
				<view class="disease-filter-form">
					<view class="filter-label">
						<u-tag :text="fitlerLableList[currentFilterLabel].name" shape="circle" plain
							@click="onChangeFilterLabel"></u-tag>
					</view>
					<view class="search-input">
						<u-search :placeholder="'请输入'+fitlerLableList[currentFilterLabel].name" v-model="fitlerKeyword"
							@search="onSearch" @custom="onSearch"></u-search>
					</view>
				</view>
				<view v-if="selected.length" class="selected-disease-list">
					<view v-for="item in selected" :key="item.id" class="selected-item">
						<u-tag closable plain size="mini" :text="item.orgName?item.orgName:item.deptNickname" @close="onUnSelectDisease(item)"></u-tag>
					</view>
				</view>
				<u-line></u-line>
				<view class="disease-list">
					<scroll-view scroll-y class="scroll-com">
						<view class="disease-scroll-warpper">
							<view v-for="item in list" :key="item.id" @click="onSelect(item)" class="disease-item">
								<view>
									<view v-if="selectType==='hospital'" class="disease-name">{{item.orgName}}</view>
									<view v-else class="disease-name">{{item.deptNickname}}</view>
								</view>

								<view class="checkbox-warpper" :class="{'selected': isSelected(item) > -1}">
									<u-icon v-if="isSelected(item) > -1" color="#fff" size="16px"
										name="checkbox-mark"></u-icon>
								</view>
							</view>
						</view>
					</scroll-view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		hospitalListApi,
		deptListApi
	} from '@/common/api/index.js'

	const app = getApp()

	export default {
		name: 'select-hospital-popup-com',
		emits: ['select'],
		data() {
			return {
				visable: false,
				fitlerLableList: [{
					name: '名称'
				}, ],
				fitlerKeyword: '',
				currentFilterLabel: 0,
				list: [],
				selected: [],
				hospitalId: '',
				selectType:''
			}
		},
		methods: {
			getDept() {
				this.$nextTick(() => {
					let params = {
						hospitalId: this.hospitalId,
						deptName: this.fitlerKeyword
					}
					deptListApi(params).then(res => {
						this.list = res.object
						app.hideLoading()
					}).catch(
						app.hideLoading()
					)
				})
			},
			getHospital() {
				this.$nextTick(() => {
					let params = {
						hospitalName: this.fitlerKeyword
					}
					hospitalListApi(params).then(res => {
						this.list = res.object
						app.hideLoading()
					}).catch(
						app.hideLoading()
					)
				})
			},
			onSelect(e) {
				let index = this.isSelected(e)
				if (index > -1) {
					this.selected.splice(index, 1)
				} else {
					this.selected = [e]
				}
			},
			onUnSelectDisease(e) {
				let index = this.selected.findIndex(item => {
					return item.id == e.id
				})

				this.selected.splice(index, 1)
			},
			onConfirm() {
				if (!this.selected.length) {
					app.showToast({
						title: '请选择内容'
					})
					return
				}

				this.$emit('select', JSON.parse(JSON.stringify(this.selected)))

				this.onClose()
			},
			onClose() {
				this.visable = false

				this.fitlerLableList = [{
					name: '名称'
				}, ];
				this.fitlerKeyword = ''

				this.list = []
				this.selected = []
			},
			onChangeFilterLabel() {
				this.currentFilterLabel = this.currentFilterLabel + 1
				if (this.currentFilterLabel >= this.fitlerLableList.length) {
					this.currentFilterLabel = 0
				}
			},
			onSearch() {
				if (this.selectType === 'hospital') {

					this.getHospital()
				} else {

					this.getDept()
				}
			},
			isSelected(e) {
				let index = this.selected.findIndex(item => {
					return item.id == e.id
				})

				return index
			},
			open(type, id) {
				this.hospitalId = id
				this.selectType = type
				this.visable = true
				app.showLoading()
				if (this.selectType === 'hospital') {

					this.getHospital()
				} else {

					this.getDept()
				}



			},
		}
	}
</script>

<style lang="scss" scoped>
	.scroll-com {
		width: 100%;
		height: 100%;
	}

	.select-disease-popup-com {
		.select-disease-popup-container {
			width: 750rpx;

			.select-disease-popup-header {
				padding: 0 32rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				height: 55px;
				line-height: 55px;
				text-align: center;

				.title {
					font-size: $ft-size-lg;
					color: $text-main-color;
					font-weight: bold;
				}
			}

			.disease-filter-form {
				margin: 0 auto 10px;
				display: flex;
				align-items: center;
				width: 686rpx;

				.filter-label {
					margin-right: 10px;
				}

				.search-input {
					flex: 1;
				}
			}

			.selected-disease-list {
				display: flex;
				flex-wrap: wrap;
				width: 100%;
				margin: 0 auto 10px;
				padding: 0 32rpx;
				box-sizing: border-box;
			}

			.disease-list {
				width: 750rpx;
				height: 70vh;

				.disease-item {
					position: relative;
					margin: 32rpx auto 0;
					padding: 10px;
					box-sizing: border-box;
					width: 686rpx;
					border-radius: 10px;
					background-color: $primary-light;

					.disease-name {
						font-size: $ft-size-md;
						color: $text-main-color;
					}

					.disease-code {
						// margin-top: 5px;
						font-size: $ft-size-base;
						color: $text-content-color;
					}

					.checkbox-warpper {
						position: absolute;
						right: 10px;
						top: 0;
						bottom: 0;
						display: flex;
						align-items: center;
						justify-content: center;
						margin: auto;
						width: 20px;
						height: 20px;
						box-sizing: border-box;
						border-radius: 100%;
						border: 1px solid #999
					}

					.checkbox-warpper.selected {
						border-color: $primary;
						background-color: $primary;
					}
				}
			}
		}
	}
</style>